<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录界面</title>
		<link rel="stylesheet" href="../css/loginstyle.css" />
	</head>
	<body>
		<div id="content">
			<div name="logo">
				<img src="../img/img01.jpg">
			</div>
			<div>
				<form action="../example/nav.html" method="get"><!--action:服务器的处理程序，method：提交的方式get，post-->
				<div>
					 <label>用户名：</label><input type="text" name="username" placeholder="请输入用户名">
				</div>
				<div>
				   <label>密&nbsp;&nbsp;&nbsp;码：</label><input type="password" name="userpwd" placeholder="请输入密码">
				</div>
				<div>
				    <input type="submit" value="登录" onclick="return checkfun();">
				</div>
				</form>
			</div>
		</div>
		<!--对用户名和密码的输入进行判断：
			1：用户名和密码不能为空
			2：用户名的长度：10-30个字符
			   密码长度：8个字符以上
		-->
		<script>
			function checkfun(){
				/*提取用户名*/
				var username=document.getElementsByName("username")[0];
				/*用户名，不能为空*/
				if(username==null|| username.value.trim().length==0){
					alert("用户名不能为空");
					return false;
				}
				/*用户名的长度为10-30*/
				if(!(username.value.trim().length>=10&&username.value.trim().length<=30)){
					alert("用户名长度在10到30之间");
					return false;
				}
				/*提取密码：*/
				var userpwd=document.getElementsByName("userpwd")[0];
				/*判断不能为空*/
				if(userpwd==null||userpwd.value.trim().length==0){
					alert("密码不能为空");
					return false;
				}
				/*判断长度*/
				if(!(userpwd.value.trim().length>=8)){
					alert("密码长度在8个字符以上");
					return false;
				}
				return true;
			}
			
		</script>
		
	</body>
</html>
